<template>
    <div id="cesium-container">
        <div id="slider"></div>
    </div>
</template>
  
<script>
export default {
    name: 'ThreeDTilesCompare',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                // terrainProvider: new window.Cesium.CesiumTerrainProvider({
                //     url: 'http://data.mars3d.cn/terrain',
                //     requestWaterMask: true,
                //     requestVertexNormals: true
                // }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            const left = window.viewer.scene.primitives.add(
                new window.Cesium.Cesium3DTileset({
                    url: window.Cesium.IonResource.fromAssetId(69380),
                })
            );

            left.splitDirection = window.Cesium.SplitDirection.LEFT;

            const right = window.viewer.scene.primitives.add(window.Cesium.createOsmBuildings());
            right.splitDirection = window.Cesium.SplitDirection.RIGHT;

            window.viewer.zoomTo(left);

            // Sync the position of the slider with the split position
            const slider = document.getElementById("slider");
            window.viewer.scene.splitPosition =
                slider.offsetLeft / slider.parentElement.offsetWidth;

            const handler = new window.Cesium.ScreenSpaceEventHandler(slider);

            let moveActive = false;

            function move(movement) {
                if (!moveActive) {
                    return;
                }

                const relativeOffset = movement.endPosition.x;
                const splitPosition =
                    (slider.offsetLeft + relativeOffset) /
                    slider.parentElement.offsetWidth;
                slider.style.left = `${100.0 * splitPosition}%`;
                window.viewer.scene.splitPosition = splitPosition;
            }

            handler.setInputAction(function () {
                moveActive = true;
            }, window.Cesium.ScreenSpaceEventType.LEFT_DOWN);
            handler.setInputAction(function () {
                moveActive = true;
            }, window.Cesium.ScreenSpaceEventType.PINCH_START);

            handler.setInputAction(move, window.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            handler.setInputAction(move, window.Cesium.ScreenSpaceEventType.PINCH_MOVE);

            handler.setInputAction(function () {
                moveActive = false;
            }, window.Cesium.ScreenSpaceEventType.LEFT_UP);
            handler.setInputAction(function () {
                moveActive = false;
            }, window.Cesium.ScreenSpaceEventType.PINCH_END);
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}

#slider {
    width: 5px;
    height: 100%;
    position: absolute;
    left: 50%;
    background-color: #3370FF;
    z-index: 10;
}
</style>
  